<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
// 调用defineEmits方法 并接受父组件给绑定的事件
const emit = defineEmits(['revert', 'resetGame', 'nextTable', 'showMultiplePicker'])
const revert = () => {
    emit("revert", '我是子组件传递的数据')
}
const resetGame = () => {
    emit("resetGame", '我是子组件传递的数据')
}
const nextTable = () => {
    emit("nextTable", '我是子组件传递的数据')
}
const showMultiplePicker = () => {
    emit("showMultiplePicker", '我是子组件传递的数据')
}

let props = defineProps({
    multiple: {
        type: Number,
        default: 1,
        required: true
    }
})
</script>


<template>
    <van-row class="operate">
        <van-col :span="6">
            <button class="BSync" @click="revert">撤销</button>
        </van-col>
        <van-col :span="6">
            <button class="BSync" @click="resetGame">重置</button>
        </van-col>
        <van-col :span="6">
            <button class="BSync" @click="nextTable">换桌</button>
        </van-col>
        <van-col :span="6">
            <button class="BSync" @click="showMultiplePicker">{{ multiple }}</button>
        </van-col>
    </van-row>
</template>

<style scoped>
.operate {
    text-align: center;
    height: auto;
    margin: 5px 0;
}


.BSync {
    background-color: coral;
    color: white;
}

.revert {
    background-color: #c0c0c0;
}

.change {
    background-color: darkgoldenrod;
}

.restart {
    background-color: rgb(244, 0, 252);
}

.changetable {
    background-color: cadetblue;
}
</style>